Vue Directives
Vue নির্দেশাবলী হল v- উপসর্গ সহ বিশেষ HTML বৈশিষ্ট্য যা HTML মার্কআপে অতিরিক্ত কার্যকারিতা প্রদান করে।
গতিশীল এবং প্রতিক্রিয়াশীল ব্যবহারকারী ইন্টারফেস তৈরি করতে Vue নির্দেশাবলী Vue উদাহরণের সাথে একত্রিত হয়।
Vue এর সাথে, প্রতিক্রিয়াশীল পৃষ্ঠাগুলি তৈরি করা অনেক সহজ এবং প্রথাগত জাভাস্ক্রিপ্ট পদ্ধতির তুলনায় কম কোডের প্রয়োজন।
Different Vue Directives
নীচে তালিকাভুক্ত বিভিন্ন Vue নির্দেশাবলী রয়েছে যা আমরা এই টিউটোরিয়ালে ব্যবহার করব।
| Directive | বিস্তারিত |
|---|---|
| v-bind | Vue ইনস্ট্যান্সের মধ্যে একটি ডেটা ভেরিয়েবলের সাথে HTML ট্যাগের একটি বৈশিষ্ট্য সংযুক্ত করে। |
| v-if | একটি শর্তের উপর ভিত্তি করে HTML ট্যাগ তৈরি করে। v-else-if এবং v-else নির্দেশাবলী একসাথে v-if নির্দেশের সাথে ব্যবহার করা হয়। |
| v-show | একটি শর্তের উপর নির্ভর করে একটি HTML উপাদান দৃশ্যমান হবে কিনা তা নির্দিষ্ট করে। |
| v-for | উদাহরণে একটি অ্যারের উপর ভিত্তি করে ট্যাগের একটি তালিকা তৈরি করতে Vue একটি ফর-লুপ ব্যবহার করে। |
| v-on | একটি HTML ট্যাগ একটি ইভেন্টকে জাভাস্ক্রিপ্ট এক্সপ্রেশন বা Vue ইনস্ট্যান্স পদ্ধতিতে আবদ্ধ করে। ইভেন্ট-মোডিফায়ার ব্যবহার করে আমাদের পৃষ্ঠার একটি নির্দিষ্ট ইভেন্টে কীভাবে প্রতিক্রিয়া জানানো উচিত তাও আমরা সংজ্ঞায়িত করতে পারি। |
| v-model | <form>, <input> এবং <button> এর মত ট্যাগ সহ HTML আকারে ব্যবহৃত হয়। একটি ইনপুট উপাদান এবং একটি Vue ইনস্ট্যান্স ডেটা সম্পত্তির মধ্যে একটি দ্বি-মুখী বাঁধাই তৈরি করে। |
Example: The v-bind Directive
আপনার নিজস্ব Vue সার্ভার পান
ব্রাউজার Vue ইন্সট্যান্স থেকে বের করে কোন ক্লাসে <div> এলিমেন্টকে আবদ্ধ করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pinkBG {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="vueClass"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
vueClass: "pinkBG"
}
}
})
app.mount('#app')
</script>
</body>
</html>দ্রষ্টব্য:
উপরের উদাহরণটি Vue কোড ছাড়া খুব সহজভাবে লেখা যেতে পারে, তবে ধৈর্য ধরুন। প্রতিক্রিয়াশীল পৃষ্ঠাগুলি তৈরি করার সময় Vue এর আসল সুবিধাগুলি পরবর্তী উদাহরণগুলিতে দেখা যাবে।
Learning Vue at Jassif Team
Jassif টিমে Vue শেখার সময়, আপনি আমাদের "Try it Yourself" টুল ব্যবহার করতে পারেন, যা কোড এবং ফলাফল উভয়ই দেখায়। এটি আমাদের অগ্রগতির সাথে সাথে প্রতিটি বিভাগকে বোঝা সহজ করে তুলবে।
টিউটোরিয়াল চালিয়ে যেতে 'পরবর্তী' ক্লিক করুন।
Exercise
প্রশিক্ষণ:
"myClass" ডেটা অ্যাট্রিবিউটের সাথে ক্লাস অ্যাট্রিবিউট যুক্ত করতে নীচের অংশটি পূরণ করুন।
<p
:class="myClass"></p>